<!-- 商品列表 -->
<template>
	<view class="list-box">
		<view class="bg"></view>
		<view>
			<view class="card u-flex u-col-center u-row-between">
				<view>
					<text class="text-gray">可用积分：</text>
					<text>{{ userInfo.score }}</text>
				</view>
				<view style="position: relative;color:#E77817" @tap="jump('/pages/index/cart')">
					<u-icon name="shopping-cart" color="#E77817" size="30"></u-icon>
					<text class="u-m-l-10">购物车</text>
					<u-badge type="error" size="mini" :offset="[-20,-20]" :count="totalCount.totalNum"></u-badge>
				</view>
			</view>

			<!-- 搜索栏 -->
			<view class="u-m-r-30 u-m-l-30">
				<u-search placeholder="输入产品名称" shape="square" style="border-radius:20rpx;overflow: hidden;"
					@change="onSearch" @search="onSearch" @clear="clearSearch" v-model="searchVal" :showAction="false"
					height="80" bg-color="#fff"></u-search>
			</view>
		</view>

		<view class="card">
			<!-- 筛选栏 -->
			<view class="u-m-b-30">
				<u-dropdown ref="uDropdown" active-color="#E77817">
					<u-dropdown-item v-model="listParams.cid" :title="listParams.cid === 0 ? '一级筛选' : categoryName">
						<u-cell-group>
							<u-cell-item :arrow="false" v-for="item in categoryList" :key="item.id" :title="item.title"
								:title-style="{'color': listParams.cid === item.id ? '#E77817' : ''}"
								@tap="selectCategory(item)">
								<view slot="right-icon">
									<u-icon name="checkbox-mark"
										:color="listParams.cid === item.id ? '#E77817' : '#e4e4e4'" size="28"></u-icon>
								</view>
							</u-cell-item>
						</u-cell-group>
					</u-dropdown-item>

					<u-dropdown-item v-model="listParams.cate_id"  :title="listParams.cate_id === 0 ? '二级筛选' : categoryName_god">
						<u-cell-group>
							<u-cell-item :arrow="false" v-for="item in categoryList_god" :key="item.id" :title="item.title"
								:title-style="{'color': listParams.cate_id === item.id ? '#E77817' : ''}"
								@tap="selectCategory_god(item)">
								<view slot="right-icon">
									<u-icon name="checkbox-mark"
										:color="listParams.cate_id === item.id ? '#E77817' : '#e4e4e4'" size="28"></u-icon>
								</view>
							</u-cell-item>
						</u-cell-group>
					</u-dropdown-item>
				</u-dropdown>
			</view>

			<view class="goods-list" v-if="!isEmpty">
				<view class="goods-item u-flex u-row-center u-col-center" v-for="item in goodsList" :key="item.id">
					<shopro-goods-card :detail="item" :image="$IMG_URL + item.thumb" :title="item.title"
						:price="item.price"
						@click="$Router.push({ path: '/pages/goods/detail', query: { id: item.id } })">
					</shopro-goods-card>
				</view>
			</view>

			<!-- 缺省页 -->
			<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'"
				tipText="暂无该商品，还有更多好货等着你噢~"></shopro-empty>

			<!-- 加载更多 -->
			<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		</view>
		<!-- 登录弹窗 -->
		<shopro-auth-modal></shopro-auth-modal>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	let systemInfo = uni.getSystemInfoSync();
	export default {
		components: {},
		data() {
			return {
				isEmpty: false,
				categoryList: [],
				goodsList: [],
				searchVal: '',
				categoryName: '',
				listParams: {
					cid: 0, // 商品分类ID
					cate_id:0,
					title: '',
					page: 1,
					pagesize: 10,
				},
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				lastPage: 1,
				categoryList_god:[]
			};
		},
		// 触底加载更多
		onReachBottom() {
			if (this.listParams.page < this.lastPage) {
				this.listParams.page += 1;
				this.getGoodsList();
			}
		},
		onReady() {
			//动态修改状态栏的颜色
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#FFCD41'
			})
		},
		onLoad() {
			this.getCategory();
			if (this.$Route.query.id) {
				this.listParams.pid = this.$Route.query.id;
				this.getGoodsList();
			} else if (this.$Route.query.hasOwnProperty('keywords')) {
				this.listParams.title = this.$Route.query.keywords;
				this.searchVal = this.$Route.query.keywords;
				!this.$Route.query.keywords && this.getGoodsList();
			} else {
				this.getGoodsList();
			}
			this.getCartList();
			this.getUserInfo()
		},
		computed: {
			...mapGetters(['userInfo', 'totalCount']),
		},
		methods: {
			...mapActions(['getCartList','getUserInfo']),
			// 类别筛选
			selectCategory(item) {
				this.goodsList = [];
				this.listParams.page = 1;
				this.lastPage = 1;
				this.categoryName = item.title;
				this.listParams.cid = item.id;
				this.listParams.cate_id = 0;
				this.$refs.uDropdown.close(); // 关闭下拉菜单
				this.getGoodsList();
				this.getcate_list(item.id)
			},
			selectCategory_god(item){
				this.goodsList = [];
				this.listParams.page = 1;
				this.lastPage = 1;
				this.categoryName_god = item.title;
				this.listParams.cate_id = item.id
				this.$refs.uDropdown.close(); // 关闭下拉菜单
				this.getGoodsList();
			},
			getcate_list(e){
				let that = this;
				that.$http('goods.getCategory', {
					pid: e
				}).then(res => {
					if (res.code === 1) {
						that.categoryList_god = res.data;
					}
				});
			},
			// 名称筛选
			nameFilter() {
				console.log(this.searchVal);
			},
			clear() {
				this.leftList = [];
				this.rightList = [];
				this.leftHeight = 0;
				this.rightHeight = 0;
				this.tempList = [];
			},

			onFilter(e) {
				this.listParams.order = e;
				this.goodsList = [];
				this.listParams.page = 1;
				this.lastPage = 1;
				this.clear();
				this.$u.debounce(this.getGoodsList);
			},
			// 键盘搜索,输入搜索
			onSearch() {
				this.goodsList = [];
				this.listParams.page = 1;
				this.lastPage = 1;
				this.listParams.title = this.searchVal;
				this.clear();
				this.$u.debounce(this.getGoodsList);
			},

			// 清除搜索框
			clearSearch() {
				this.searchVal = '';
				this.clear();
			},
			// 商品分类
			getCategory() {
				let that = this;
				that.$http('goods.getCategory', {
					pid: that.listParams.cid
				}).then(res => {
					if (res.code === 1) {
						that.categoryList = res.data;
					}
				});
			},
			// 商品列表
			getGoodsList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('goods.lists', that.listParams, '加载中...').then(res => {
					if (res.code === 1) {
						that.goodsList = [...that.goodsList, ...res.data.list];
						that.isEmpty = !that.goodsList.length;
						that.lastPage = res.data.total_page
						that.loadStatus = that.listParams.page < res.data.total_page ? 'loadmore' : 'nomore';
					}
				});
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
		}
	};
</script>

<style lang="scss">
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.u-waterfall {
		@include vue-flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.u-column {
		@include vue-flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}

	.head-box {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 998;
		background: #fff;
	}

	uni-page-body {
		background-color: transparent !important;
	}

	.bg {
		position: fixed;
		inset: 0;
		z-index: -1;
		background: linear-gradient(180deg, #FFCD41 0%, #F3F3F3 49%, #F3F3F3 100%);
	}

	.goods-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto auto;
		gap: 10px;
	}
</style>